<template>
  <div>
    <div v-show="isShow">全场清仓，全部5折</div>

    <ul>
      <li v-for="(item,index) in goods" :key="index">
        <div>{{item.name}}</div>
        <div>{{item.price}}</div>
        <div>折扣：{{discountDefault}}</div>
      </li>
    </ul>

    <input type="text" v-model="discountDefault"/>

    <h4>总价{{discount}}</h4>

    <button  @click="discount = discountDefault">点击开启促销活动</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      goods: [
        {
          name: 'mac电脑',
          price: 15000,
        },
        {
          name: '百事可乐',
          price: 3,
        },
        {
          name: '保温杯',
          price: 99,
        },
        {
          name: '保暖手套',
          price: 130,
        },
      ],
      isShow: false,
      discountDefault: 0.5,
    }
  },

  computed:{
    discount:{
      get(){
        return this.goods.reduce((prov,item)=> prov + item.price,0)
      },
      set(value){
        console.log(value);
        this.isShow = true
        this.goods.forEach(item=>{
          item.price = item.price * value
          // console.log(item.price);
        })
      }
    }
  }
}
</script>

<style scoped>
ul {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
  width: 200px;
  height: 80px;
  padding: 10px 0 0 0;
  border: 2px solid #333;
}
</style>